import advListEjs from '$v/advlist'
import advApi from '$a/advApi';
function addAdvBtn(){
    $('#modal-default').modal('show')
}
function changeFile(){
    // 1. 获取到图片的信息
    console.log(this.files[0]);
    // 2. 生产预览图 要将图片信息===> base64URL ===> FileReader 类
    const reader = new FileReader()
    reader.readAsDataURL(this.files[0])// 读取文件信息===》 base64格式URL
    reader.onload = function(e){
        let base64URL = e.currentTarget.result
        $('#preview').show().find('img').attr('src',base64URL)
    }
    // 3. 将预览图放入 img src属性，实现图片展示
}
async function saveBtn(){
    // 1. 获取表单数据 formdata
    let formdata = new FormData(document.advForm);
    // 2. 验证数据
    let advTitle = formdata.get('advTitle').trim()
    let advOrder = formdata.get('advOrder').trim()
    let advHref = formdata.get('advHref').trim()
    if(!advTitle.length){
        toastr.error('标题不能为空')
        return
    }else if(!advOrder.length){
        toastr.error('排序值不能为空')
        return
    }else if(!advHref.length){
        toastr.error('链接不能为空')
        return
    }
    // 3. 发送
    let {msg,code} = await advApi.addAdv(formdata)
    // 4. 根据结果处理
    if(code){
        toastr.error(msg)
    }else{
        // 1. 清空表单数据
        document.advForm.reset()
        // 2. 关闭预览图
        $('#preview').hide().find('img').attr('src','')
        // 3. 关闭模态框
        $('#modal-default').modal('hide')
    }
}
export default function advController() {
    return async (req, res) => {
        res.render(advListEjs())
        $('#titleShow').html('广告列表');
        // 点击添加广告按钮，弹出模态框
        $('#addAdvBtn').on('click',addAdvBtn)
        // 选择图片文件时，形成预览
        $('[name=advPic]').on('change',changeFile)
        // 点击保存按钮，添加广告
        $('#saveBtn').on('click',saveBtn)
    }
}